<template>
    <el-container class="entry-container">
        
        <!-- <el-image class="entry-bg" :src="bgurl" fit="fill"></el-image> -->

        <el-header class="entry-header" height="130px">
            <el-avatar class="entry-headpic" :size="80" :src="circleUrl"></el-avatar>

            <ul></ul>
        </el-header>

        <el-main class="entry-main">
            <ul class="entrylink">
                <li :class="item.class" v-for="(item, index) in homeList" :key="index" @click="jumpOnCurrentHome(item)" v-wifetalk="item.title">
                    <div class="clo">
                        <span>{{ item.title }}</span>
                        <span>{{ item.tip }}</span>
                    </div>
                    <div class="clo" >
                        <div class="icon-border">
                            <i :class="['autism-icon', item.icon]"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </el-main>

        <el-footer class="entry-footer" height="150px">

        </el-footer>
        
    </el-container>
</template>

<script>
    export default {
        name: '',
        components: {},
        data() {
            return {
                circleUrl: '../../../static/image/headpic/default_head.jpg',

                homeList: [
                    { title: 'DEFAULT', icon: 'autism-dingding-fill', tip: '', class: 'bg--blue', path: '/home' },
                    { title: 'VIP', icon: 'autism-alipay-fill', tip: '', class: 'bg--green', path: '/homevip' },
                    { title: 'VISUALIZATION', icon: 'autism-wechat-fill', tip: '', class: 'bg--red', path: '/datavhome' },
                    { title: 'MOBILE', icon: 'autism-weibo-fill', tip: '', class: 'bg--gary', path: '/phonehome' },
                ],
            };
        },

        computed: {

        },

        mounted() {

        },

        methods: {
            jumpOnCurrentHome(link) {
                this.$store.commit('auth/setLoginState', 0)
                // console.log('link', link)
                this.$router.push({ path: link.path })
            }
        }
    }

</script>

<style lang='scss' scoped>

.entry-container {
    width: 100%;
    height: 100%;
    background: transparent;

    background-image:-webkit-linear-gradient(top,#15243B,#11182B);
    /* Safari 5.1 - 6.0 */
    background-image:-o-linear-gradient(top,#15243B,#11182B);
    /* Opera 11.1 - 12.0 */
    background-image:-moz-linear-gradient(top,#15243B,#11182B);
    /* Firefox 3.6 - 15 */
    background-image:linear-gradient(to bottom,#15243B,#11182B);
    /* 标准的语法（必须放在最后） */

    .entry-headpic {
        border: 1px solid #ebeef5;
    }

    .entry-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .entry-main {
        display: flex;
        align-items: center;
        ul {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .entry-footer {

    }
}
.entrylink {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80%;
    li {
        cursor: pointer;
        height: 100%;
        width: 17%;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-shadow: 0 2px 12px 0 rgba(0,0,0, 0.1);

        &.bg {
            &--blue {
                background-image:-webkit-linear-gradient(top,#334277,#5993C2);
                /* Safari 5.1 - 6.0 */
                background-image:-o-linear-gradient(top,#334277,#5993C2);
                /* Opera 11.1 - 12.0 */
                background-image:-moz-linear-gradient(top,#334277,#5993C2);
                /* Firefox 3.6 - 15 */
                background-image:linear-gradient(to bottom,#334277,#5993C2);
                /* 标准的语法（必须放在最后） */

                &:hover {
                    box-shadow: 0 2px 12px 0 rgba(#5993C2, 0.3);
                }
            }

            &--green {
                background-image:-webkit-linear-gradient(top,#0584BA,#1AC596);
                /* Safari 5.1 - 6.0 */
                background-image:-o-linear-gradient(top,#0584BA,#1AC596);
                /* Opera 11.1 - 12.0 */
                background-image:-moz-linear-gradient(top,#0584BA,#1AC596);
                /* Firefox 3.6 - 15 */
                background-image:linear-gradient(to bottom,#0584BA,#1AC596);
                /* 标准的语法（必须放在最后） */

                &:hover {
                    box-shadow: 0 2px 12px 0 rgba(#1AC596, 0.3);
                }
            }

            &--red {
                background-image:-webkit-linear-gradient(top,#C73875,#F56F6E);
                /* Safari 5.1 - 6.0 */
                background-image:-o-linear-gradient(top,#C73875,#F56F6E);
                /* Opera 11.1 - 12.0 */
                background-image:-moz-linear-gradient(top,#C73875,#F56F6E);
                /* Firefox 3.6 - 15 */
                background-image:linear-gradient(to bottom,#C73875,#F56F6E);
                /* 标准的语法（必须放在最后） */

                &:hover {
                    box-shadow: 0 2px 12px 0 rgba(#F56F6E, 0.3);
                }
            }

            &--gary {
                background-image:-webkit-linear-gradient(top,#3F5972,#637EA4);
                /* Safari 5.1 - 6.0 */
                background-image:-o-linear-gradient(top,#3F5972,#637EA4);
                /* Opera 11.1 - 12.0 */
                background-image:-moz-linear-gradient(top,#3F5972,#637EA4);
                /* Firefox 3.6 - 15 */
                background-image:linear-gradient(to bottom,#3F5972,#637EA4);
                /* 标准的语法（必须放在最后） */

                &:hover {
                    box-shadow: 0 2px 12px 0 rgba(#637EA4, 0.3);
                }
            }
        }

        .clo {
            display: flex;
            justify-content: center;
            font-size: 28px;
            color: #FFFFFF;
        }

        .icon-border {
            border: 1px solid #ebeef5;
            border-radius: 50%;
            padding: 7px 10px;
            i {
                font-size: 50px;
            }
        }
    }
}
</style>
